<template>
  <div class="home">
    <Nav :showLeft="true" mytitle="详情页" @back="fn" />
    <div class="title_inp_box">
      <input type="text" placeholder="标题" v-model="title" />
    </div>
    <div class="content_inp_box">
      <textarea placeholder="内容" v-model="content"></textarea>
    </div>
    <button class="btn" @click="submit">确定</button>
  </div>
</template>

<script>
import Nav from "../components/Nav";
export default {
  name: "Info",
  data() {
    return {
      title: "",
      content: "",
    };
  },
  created() {
    let id = this.$route.query._id;
    let data = this.$store.state.list.filter((item) => item.id == id);
    if (data.length) {
      this.title = data[0].title;
      this.content = data[0].content;
    }
  },
  components: {
    Nav,
  },
  methods: {
    fn() {
      this.$router.back();
    },
    submit() {
      let id = this.$route.query._id;
      if (id) {
        //更新
        this.$store.commit("updateNote", {
          id: id,
          title: this.title,
          content: this.content,
          time: new Date().toLocaleString(),
        });
      } else {
        //新增
        this.$store.commit("addNote", {
          id: Math.random(),
          title: this.title,
          content: this.content,
          time: new Date().toLocaleString(),
        });
      }

      this.$router.push("/");
    },
  },
};
</script>

<style lang='less'>
.title_inp_box {
  width: 80%;
  margin: auto;
  height: 1.5rem;
  input {
    border: none;
    outline: none;
    padding: 0 0.3rem;
    width: 100%;
    height: 1.5rem;
    font-size: 0.6rem;
    box-sizing: border-box;
  }
}
.content_inp_box {
  width: 80%;
  margin: auto;
  padding: 0.5rem 0;
  min-height: 2rem;
  textarea {
    resize: none;
    width: 100%;
    height: 100%;
    padding: 0 0.3rem;
    border: none;
    font-size: 0.6rem;
    outline: none;
  }
}
.btn {
  padding: 0.1rem 0.3rem;
  border: none;
}
</style>